<template>
	<view class="meituan" :style="background.zt_bg">
		<u-navbar :autoBack="false" title=" " :bgColor="background.bgColor" @leftClick="gohome" ref="navbar">
			<u-icon slot="left" name="home" color="#fff" size="22"></u-icon>
			<view class="slot-wrap" slot="center">
				<view class="center">
					<u-tabs keyName="name" :list="tabInfo" :scrollable="false" :current="current" @change="onChangeTab"
						:inactiveStyle="{color:'#FFF'}" :activeStyle="{color:'#FFF'}" lineColor="#fff"></u-tabs>
				</view>
			</view>
		</u-navbar>

		<waimai v-if="current==0" :marginTop="tabBarHeight"></waimai>
		<sc v-else :marginTop="tabBarHeight"></sc>



	</view>
</template>

<script>
	import waimai from './waimai.vue'
	import sc from './sc.vue'

	export default {
		components: {
			sc,
			waimai
		},
		data() {
			return {
				notitle: '',
				tabInfo: [{
					name: '外卖',
					actId: '2',
					backgroundColor: '#feac00',
					bgc: 'background-color:#fdc413',
				}, {
					name: '商超',
					actId: '4',
					backgroundColor: '#5ddd24',
					bgc: 'background-color:#5ddd24',
				}],
				current: 0,
				background: {
					bgColor: '',
					zt_bg: ''
				},
				tabBarHeight: ''
			}
		},

		onShow(e) {
			let current = this.$store.state.meituan_currentid
			this.change(current)

			var navbar = this.$refs["navbar"]
			console.log('navbar height:' + navbar.height)
			this.tabBarHeight = navbar.height
		},
		methods: {
			//切回首页tab
			gohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 切换
			change(index) {
				console.log("current:" + index)
				this.current = index
				this.$store.commit('setmeituan_currentid', index)
				this.background.bgColor = this.tabInfo[this.current].backgroundColor
				this.background.zt_bg = this.tabInfo[this.current].bgc
			},
			onChangeTab(item) {
				console.log("current:" + item.index)
				this.change(item.index)
			}
		},
	}
</script>

<style scoped lang="scss">
	.meituan {
		// height: 100vh;



	}

	.slot-wrap {
		display: flex;
		align-items: center;
		width: 750rpx;

		.center {
			width: 300rpx;
			margin: 0 auto;
		}

	}
</style>
